<template>
  <a-form :model="state.form"
          ref="ruleForm"
          :rules="rulesAddTimeFrom"
          v-bind="state.layout">
    <a-form-item label="计划日期"
                 v-bind="checkFrom.validateInfos.date">
      <a-date-picker valueFormat="YYYY-MM-DD HH:MM:ss"
                     v-model:value="state.form.date"
                     show-time
                     type="date"
                     placeholder="请选择计划日期"
                     style="width: 100%;" />
    </a-form-item>
    <a-form-item label="耗时"
                 v-bind="checkFrom.validateInfos.time">
      <a-input-number v-model:value="state.form.time"
                      :min="1"
                      :max="10"
                      placeholder="请选择耗时"
                      style="width: 100%;"></a-input-number>
    </a-form-item>
    <a-form-item label="备注"
                 v-bind="checkFrom.validateInfos.content">
      <a-textarea v-model:value="state.form.content"
                  placeholder="请输入备注"
                  :rows="4"
                  style="width: 100%;" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary"
                @click="onSubmit">
        创建任务
      </a-button>
      <a-button @click="onCreal"
                style="margin-left: 10px;">
        重置
      </a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts">
  import { Options, Vue } from "vue-class-component";
  import { Watch } from "vue-property-decorator";
  import moment from "moment";
  import { state } from "./model";
  import { checkFrom } from "./check";
  @Options({
    props: {
      handlePlan: Function,
    },
  })
  export default class Create extends Vue {
    private state = state;
    private checkFrom = checkFrom(this.state.form);
    private async onSubmit() {
      this.checkFrom.validate().then((res: Object) => {
        this.$emit("handlePlan", res);
      });
    }
    // 此处开放校验监听，onCreal会失败
    // @Watch("state.form", { immediate: false, deep: true })
    // private async onCheckFromChange(state: Object) {
    //   await this.checkFrom.validate();
    // }
    private onCreal() {
      this.checkFrom.resetFields()
    }
  }
</script>